<template>
    <div class="previewAdd">
        <div class="rx-center" v-for="(row,index) in layoutList" :key="index">
            <span class="rx-center-name">{{ configName(row) }}</span>
            <div class="rx-center-add" @click="addColumn(row,index)">
                <my-icon type="iconjia" style="margin-right: 5px"></my-icon>
                {{ $ti18('rxList.addBtn', '添加') }}
            </div>
        </div>
        <a-empty v-if="layoutList.length==0"/>
    </div>
</template>
<script>
import InsPortalUserDefApi from "@/common/api/portal/insPortalUserDef.js";

export default {
    name: 'InsPortalUserDefEdit',
    props: {
        portalId: {},
    },
    data() {
        return {
            columns: [
                {
                    title: this.$ti18('rxForm.name', '名称'),
                    dataIndex: 'name',
                    width: 100,
                    scopedSlots: {customRender: 'name'}
                },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    width: 100,
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            //栏目列表
            layoutList: [],
        }
    },
    created() {
        this.loadData();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "PortalLayoutPreview", key);
        },
        loadData(vals) {
            let self_ = this;
            InsPortalUserDefApi.getDifferentCols(this.portalId).then(res => {
                self_.layoutList = res;
            })
        },
        addColumn(record, index) {
            this.layoutList.splice(index, 1);
            this.$emit("column", record);
        },
        configName(row){
             let name = {
                 myChartBoard:this.i18n('myChartBoard','我的图表看板'),
                 chartBoard:this.i18n('chartBoard','图表看板'),
            }
            if(row.config.name){
                return this.$i18(row.config.name)
            }
            if(name[row.defConf]){
                return name[row.defConf]
            }
        }
    }
}
</script>
<style scoped>
.rx-center {
    border-radius: 5px;
    background: rgb(242, 247, 255);
    display: flex;
    height: 40px;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
}

.rx-center-name {
    margin-right: 20px;
    flex: 1;
    font-weight: bold;
}

.rx-center-add {
    color: rgb(0, 122, 255);
    font-size: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
</style>
